<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       #div1{
           margin:  0 auto;
           width: 200px;
           height: 200px;
           background-color: red;
       }
        .div{
            width: 200px;
           margin:  0 auto;

        }
    </style>
</head>
<body>

    <p>
        <div class="div">
            <button onclick="bk()" class="kuan">变宽</button>
            <button onclick="bg()" class="gao">变高</button>
            <button onclick="sw()" class="show">隐藏</button>
            <button onclick="cz()" class="new">重置</button>
        </div>
    </p>
    <div id="div1">

    </div>

 

<script>
    function bk(){
            document.getElementById("div1").style.width= '500px'
    }
    function bg(){
            document.getElementById('div1').style.height = '500px'
    }
    function sw(){
            document.getElementById('div1').style.display = "none";
    }
    function cz(){
            document.getElementById('div1').style.display = "block";
            document.getElementById('div1').style.width = "200px";
            document.getElementById('div1').style.height = "200px";
    }


</script>
    
</body>
</html>